import React, { useState, useEffect } from 'react';

interface User {
  id: number;
  name: string;
  email: string;
}

interface ExampleProps {
  title: string;
  users?: User[];
}

const Example: React.FC<ExampleProps> = ({ title, users = [] }) => {
  const [count, setCount] = useState(0);
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    const timer = setInterval(() => {
      setCount(prev => prev + 1);
    }, 1000);

    return () => clearInterval(timer);
  }, []);

  const handleClick = async () => {
    setLoading(true);
    try {
      // 模拟异步操作
      await new Promise(resolve => setTimeout(resolve, 1000));
      setCount(prev => prev + 1);
    } catch (error) {
      console.error('操作失败:', error);
    } finally {
      setLoading(false);
    }
  };

  return (
    <div className='example-component'>
      <h2>{title}</h2>
      <p>计数器: {count}</p>
      <button onClick={handleClick} disabled={loading}>
        {loading ? '加载中...' : '点击增加'}
      </button>

      {users.length > 0 && (
        <div className='user-list'>
          <h3>用户列表</h3>
          <ul>
            {users.map(user => (
              <li key={user.id}>
                {user.name} ({user.email})
              </li>
            ))}
          </ul>
        </div>
      )}
    </div>
  );
};

export default Example;
